import React, { useState } from "react";
import "../App.css";
import { Form, Input, Button, Checkbox } from "antd";
import { useHistory } from "react-router-dom";


const layout = {
  labelCol: {
    span: 7,
  },
  wrapperCol: {
    span: 20,
  },
};
const tailLayout = {
  wrapperCol: {
    offset: 7,
    span: 20,
  },
};

export default () => {
  const [form] = Form.useForm();
  const [password, setPassword] = useState("")
  let rules = {
    username: [
      { required: true, message: "用户名不能为空", trigger: "blur" },
      {
        min: 3,
        max: 20,
        message: "用户名长度必须在3到20个之间",
        trigger: "blur",
      },
    ],
    password: [
      { required: true, message: "密码不能为空", trigger: "blur" },
      {
        min: 6,
        max: 20,
        message: "长度必须在6到20个之间",
        trigger: "blur",
      },
    ],
    confirmPassword: [
      { required: true, message: "确认密码不能为空", trigger: "blur" },
      {
        min: 6,
        max: 20,
        message: "长度必须在6到20个之间",
        trigger: "blur",
      },
      {
        async validator(_, val) {
          if (val !== password) throw "输入的密码和确认密码必须一致";
        },
        message: "输入的密码和确认密码必须一致",
        trigger: "blur",
      },
    ],
    nickname: [
      { required: true, message: "昵称不能为空", trigger: "blur" },
      { max: 50, message: "昵称最大50个字符", trigger: "blur" },
    ],
  };
  let history = useHistory();
  const onFinishFailed = (errorInfo) => {
    console.log("Failed:", errorInfo);
  };

  return (
    <div className='container'>
      <Form
        {...layout}
        name="basic"
        form={form}
        initialValues={{
          remember: true,
        }}
        onFinishFailed={onFinishFailed}
      >
        <Form.Item label="用户名" name="username" rules={rules.username}>
          <Input />
        </Form.Item>

        <Form.Item label="密码" name="password" rules={rules.password}>
          <Input.Password onChange={(e) => setPassword(e.target.value)} />
        </Form.Item>

        <Form.Item
          label="确认密码"
          name="confirmPassword"
          rules={rules.confirmPassword}
        >
          <Input.Password  />
        </Form.Item>

        <Form.Item label="昵称" name="nickname" rules={rules.nickname}>
          <Input/>
        </Form.Item>
        <Form.Item {...tailLayout} name="remember" valuePropName="checked">
          <Checkbox>Remember me</Checkbox>
        </Form.Item>

        <Form.Item {...tailLayout}>
          <Button type="primary" htmlType="submit">
            注册
          </Button>
          <Button type="link" htmlType="button" onClick={()=>history.push('/')}>
          已有,去登陆！
        </Button>
        </Form.Item>
      </Form>
    </div>
  );
};
